<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import TestOne from './components/TestOne_ref.vue'
import TestTwo from './components/TestTwo_reactive.vue'
import TestThree from './components/TestThree_toRef.vue'
import ShopCart from './components/ShopCart.vue'
import TestFour from './components/TestFour_watch.vue'
import TestFive from './components/TestFive_lifeCycle.vue'
import Layout from './layout/index.vue'                           // 插槽
import TestSix from './components/TestSix_keep_transition.vue'
import TestSeven from './components/TestSeven_provide.vue'
import TestEight from './components/TestEight_mitt.vue'
import TestNine from './components/TestNine_tsx.vue'
import TestTen from './components/TestTen_vModel.vue'
import TestEleven from './components/TestEleven_directive.vue'
import TestTwelve from './components/TestTwelve_hooks.vue'
import TestThirteen from './components/TestThirteen_globalProperties.vue'
import TestFourteen from './components/TestFourteen_install.vue'
import TestFifteen from './components/TestFifteen_moduleStyle.vue'
import TestSixteen from './components/TestSixteen_nextTick.vue'
import TestSeventeen from './components/TestSeventeen_viewport.vue'
import Pinia from './components/pinia/index.vue'

import { ref } from 'vue'
const flag = ref(true)
</script>

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
  <!-- <TestOne /> -->
  <!-- <TestTwo /> -->
  <!-- <TestThree /> -->
  <!-- <ShopCart /> -->
  <!-- <TestFour /> -->
  <!-- <TestFive v-if="flag" />
  <button @click="flag=!flag">组件</button> -->
  <!-- <Layout /> -->
  <!-- <TestSix /> -->
  <!-- <TestSeven /> -->
  <!-- <TestEight /> -->
  <!-- <TestNine /> -->
  <!-- <TestTen /> -->
  <!-- <TestEleven /> -->
  <!-- <TestTwelve /> -->
  <!-- <TestThirteen /> -->
  <!-- <TestFourteen /> -->
  <!-- <TestFifteen /> -->
  <!-- <TestSixteen /> -->
  <!-- <TestSeventeen /> -->
  <Pinia />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>
